<template>
	<div class="container">
		<div class="content">
			<el-icon size="40px" class="icon"><StarFilled /></el-icon>
			<h2 class="mb-4">Welcome to Guidance!!</h2>
		</div>
		<div class="listContent">
			<div class="option" @click="toX('/BikeIndex')">
				<el-descriptions title="HomePage"> </el-descriptions>
				<p>
					&ensp;&ensp;&ensp;&ensp;This page is an introduction of the whole
					website including the approximately concept of Bike Sharing and the
					advertisement of Bike Sharing. In this page, I use the Special effects
					to display a better sense of vision. What's more, I gather some of
					cool picture combined with the fancy UI style in order to give user a
					nice experience.
				</p>
			</div>
			<div class="option" @click="toX('/Employee')">
				<el-descriptions title="For Employee"> </el-descriptions>
				<p>
					&ensp;&ensp;&ensp;&ensp;The 'For Employee Page', which takes most
					effort of me, imply three functions according to the requirement,
					which is plans choosing, map getting and shop position getting.
				</p>
			</div>
			<div class="option" @click="toX('/Employer')">
				<el-descriptions title="For Employer"> </el-descriptions>
				<p>
					&ensp;&ensp;&ensp;&ensp;The 'For Employer Page' shows a method for
					employer to register rapidly. It just need to read a agreement and
					fill a information form.
				</p>
			</div>
			<div class="option" @click="toX('/Map')">
				<el-descriptions title="Interactive Map"> </el-descriptions>
				<p>
					&ensp;&ensp;&ensp;&ensp;Supported by Amap, I could use the public Api
					of Amap in order to present a real-time and interative map.
				</p>
			</div>
			<div class="option" @click="toX('/Guide')">
				<el-descriptions title="How to Guide"></el-descriptions>
				<p>&ensp;&ensp;&ensp;&ensp;Netherless to say, it is this page. HAHA!</p>
			</div>
			<div class="option" @click="toX('/Calculator')">
				<el-descriptions title="Cost Calculator"> </el-descriptions>
				<p>
					&ensp;&ensp;&ensp;&ensp;The 'Cost Calculator Page' imply the function
					that calculate the cost of plans according to the input.
				</p>
			</div>
			<div class="option" @click="toX('/SocialMedia')">
				<el-descriptions title="Social Media Integration"> </el-descriptions>
				<p>
					&ensp;&ensp;&ensp;&ensp;The 'Social Media Integration Page' integrate
					many ways of contact me including QQ, WeChat, Address and Phone Num
				</p>
			</div>
			<div class="option" @click="toX('/Reviews')">
				<el-descriptions title="Cycle Reviews"> </el-descriptions>
				<p>
					&ensp;&ensp;&ensp;&ensp;The 'Cycle Reviews Page' provide a
					visualization of the user Orders.
				</p>
			</div>
		</div>
	</div>
</template>

<style scoped>
.container {
	width: 100%;
	background-color: whitesmoke;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px;
}

.content {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.mb-4 {
	margin-left: 20px;
	justify-content: center;
	align-items: center;
}

.m-2 {
	margin-left: 20px;
}

.icon {
	margin-left: 15px;
}

.mapLink {
	color: blue;
	cursor: pointer;
}

/* 鼠标悬停阴影效果 */
.option {
	width: 90%;
	background-color: white;
	margin: 20px;
	padding: 10px;
	cursor: pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.option:hover {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
}

.listContent {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}

div {
	border-radius: 5px;
}

/* 响应式布局，换行展示 */
@media screen and (min-width: 0px) and (max-width: 900px) {
	.option {
		width: 90%;
		background-color: white;
		margin: 20px;
		padding: 10px;
		cursor: pointer;
	}
}

.demo-progress .el-progress--line {
	margin-bottom: 15px;
	width: 350px;
	margin-left: 20px;
}
</style>

<script lang="ts" setup>
import router from "../router/index";
const format = (percentage) => (percentage === 100 ? "Full" : `${percentage}%`);
const toX = (des) => {
	router.push(des);
};
</script>
